<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="../../js/hpFrame.js"></script>
    <script src="../../js/hpComponent.js"></script>
</head>

<body>
    <div id="app" v-cloak>
        <div class="pageContainer">
            <div class="formContainer">
                <el-form :model="form" :rules="rules" ref="form">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="公告标题" :label-width="formLabelWidth" prop="title">
                                <div v-html="form.title"></div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="公告内容" :label-width="formLabelWidth" prop="content">
                                <div v-html="form.content"></div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="附件" :label-width="formLabelWidth">
                                <common-upload :groupguid="form.id" readonly="true"></common-upload>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <div class="divEditButtons">
            <el-button @click="close">关 闭</el-button>
        </div>
    </div>

</body>
<script>
    var detailUrl = apiFrameUrl + "notice/getNoticeInfo";
    var pageData = {
        //表单数据
        form: {
            id: getUrlParam('id')
        },
        //样式
        formLabelWidth: '120px',
        //验证规则
        rules: {
            title: [{
                required: true,
                message: '请输入公告标题',
                trigger: 'blur'
            }],
            content: [{
                required: true,
                message: '请输入公告内容',
                trigger: 'blur'
            }],
        },
    }

    var app = new Vue({
        el: '#app',
        data: pageData,
        methods: {
            //取消
            close() {
                CloseDialog(null, 'noticedetail');
            },
            loadDetail() {
                var param = {
                    id: getUrlParam('id')
                };
                JsonAjax(JSON.stringify(param), detailUrl, function (data, status) {
                    if (data.success) {
                        Vue.set(pageData, "form", data.result);
                    }

                })
            }
        },
        mounted() {
            checkUserInfo();
            this.loadDetail();
        },
    })
</script>

</html>